<template>
  <up-input
    :customStyle="inputStyle"
    :prefixIcon="iconType"
    prefixIconStyle="border-right:0.5vw solid #ddd;font-size:6vw;color:black;margin:0.5vw 0.8vw 0.3vw 3.3vw;padding-right:1.8vw;"
    fontSize="4.5vw"
    color="black"
    :placeholder="showText"
    placeholderStyle="color:black;font-size:4.5vw;"
    shape="circle"
    type="number"
    inputAlign="left"
    border="none"
    @change="change"
  >
    <template #suffix>
      <slot name="suffix"></slot>
    </template>
  </up-input>
</template>

<script setup>
import { reactive } from 'vue';
defineProps({
  showText: String,
  iconType: String
});
const inputStyle = reactive({
  width: '80vw',
  height: '12.7vw',
  backgroundColor: 'rgba(245,245,245,1)',
  padding: '4vw 0',
  fontFamily: "'Gill Sans', sans-serif",
  marginBottom: '5.6vw'
});
const change = () => {};
</script>

<style></style>
